<template>

  <div class="header">
    <div class="header_left">
        <a href="/beauty">
      <span class="iconfont xiala">&#xe6e1;</span>
         </a>
    </div>
    <div class="header_mid">
      <div class="header_mid_wrap">
           
        <span>分类</span>
      </div>
    </div>
    <div class="header_right">
      <span class="iconfont me">&#xe62f;</span>
      <span>我的</span>
    </div>
    <div class="header_right2">
      <span class="iconfont me">&#xe611;</span>
      <span>搜索</span>
    </div>
  </div>


</template>
<script>
export default {
    name:"HairTitle.vue"
}
</script>
<style scoped>

.header{
  width: 100%;  
  background-color: #06c1ae;
  display: flex;
  color: #ffffff;
  height: 1rem;
}
.header_left{
  width: 1rem;
}
.header_left span{
  height: 1rem;
  line-height: 1rem;
}
.header_left span.xiala{
  margin-left: .1rem;
  font-size: .32rem;
}
.header_mid{
  flex:1;
}
.header_mid_wrap{
    margin-top: .3rem;
}
.header_mid_wrap span{
  font-size: .4rem;
  margin: .3rem;

}
.header_right{
  width: 1rem;
}
.header_right span{
  height: .5rem;
  display:block;
}
.header_right span.me{
  font-size: .5rem;
}
.header_right2{
  width: 1rem;
}
.header_right2 span{
  height: .5rem;
  display:block;
}
.header_right2 span.me{
  font-size: .5rem;
}
</style>

